import React, { useEffect, useState } from 'react';
import { Avatar, Button, Divider, List, Skeleton } from 'antd';
import request from '../../api/request'
import InfiniteScroll from 'react-infinite-scroll-component';
import LIstimage from '../../conpment/LIstimage';
import From from '../../conpment/From';
const Inlist: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<any[]>([]);
    const [page, setPage] = useState(1);
    const [pageSize] = useState(10)
    const loadMoreData = async () => {
        if (loading) return;
        setLoading(true);
        try {
            const res = await request.get('/article/list', {
                params: {
                    page,
                    pageSize,
                }
            })
            console.log(res);
            let { status, data } = res
            if (status == 200) {
             setData((prvdata)=>[...prvdata,...data.rows])
             setLoading(false)
             setPage((prvpage)=>prvpage+1)
            }

        }
        catch (error) {
            setLoading(false);

        }
    };

    useEffect(() => {
        loadMoreData();
    }, []);

const [showter,setshowter]=useState(true)
const [search,setsearch]=useState(true)


    const lili=()=>{
        setshowter(!showter)
        setsearch(!search)
    }
    return (
        <div>
            <div>
                <Button onClick={()=>lili()}>士大夫看见</Button>
              <From showter={showter} search={search}></From>
            </div>
            <div

            id="scrollableDiv"
            style={{
                height: 600,
                overflow: 'auto',
                padding: '0 16px',
                border: '1px solid rgba(140, 140, 140, 0.35)',
            }}
        >
            <InfiniteScroll
                dataLength={data.length}
                next={loadMoreData}
                hasMore={data.length < 50}
                loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
                scrollableTarget="scrollableDiv"
            >
                <List
                    dataSource={data}
                    renderItem={(item) => (
                        <List.Item key={item.email}
                            extra={<LIstimage src={`https://picsum.photos/100/100?random=${item.id}`} alt={item.title}></LIstimage>}
                        >
                            <List.Item.Meta
                                avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${item.id}`} />}
                                title={<a href="https://ant.design">{item.title}</a>}
                                description={item.content}
                            />
                            {/* <div>Content</div> */}
                        </List.Item>
                    )}
                />
            </InfiniteScroll>
        </div>
        </div>
    )
}

export default Inlist
